<template>
	<div class="layout-wrapper">
		<Layout class="layout-outer">
			<Sider :width="200" collapsible hide-trigger breakpoint="sm" v-model="collapsed" class="sider-outer">
				<side-menu :collapsed="collapsed" :list="routers"></side-menu>
				<!--<side-menu :collapsed="collapsed" :list="menuList"></side-menu>-->
			</Sider>
			<Layout>
				<Header class="header-wrapper">
					<Icon :class="triggerClass" @click.native="collapsed=!collapsed" type="md-menu" :size="32"/>
				</Header>
				<Content class="content-con">
					<div>
						<Tabs type="card" :value="getTabNameByRoute($route)" @on-click="handleClickTab">
							<TabPane v-for="(item,index) in tabList" :key="`tabNav${index}`"
									 :label="labelRender(item)"
									 :name="getTabNameByRoute(item)"
							></TabPane>
						</Tabs>
					</div>
					<div class="view-box">
						<Card shadow class="page-card">
							<router-view></router-view>
						</Card>
					</div>
				</Content>
			</Layout>
		</Layout>
	</div>
</template>

<script>
	import sideMenu from '../components/side-menu';
	import {mapActions, mapMutations, mapState} from 'vuex';
	import {getRouteById, getTabNameByRoute} from "../lib/util";

	export default {
		name: "Layout-page",
		components: {sideMenu},
		data() {
			return {
				collapsed: false,
				getTabNameByRoute
				/*menuList: [
					{title: '文档', name: 'doc', icon: 'ios-book'},
					{
						title: '组件', name: 'component', icon: 'logo-buffer',
						children: [
							{title: '数字渐变', name: 'number', icon: 'md-trending-up'},
							{
								title: '拖拽列表', name: 'drop', icon: 'ios-infinite',
								children: [
									{title: '拖拽向左', name: 'back', icon: 'md-arrow-round-back'},
									{title: '拖拽向右', name: 'forward', icon: 'md-arrow-round-forward'}
								]
							},
						]
					},
					{title: '数据上传', name: 'upload', icon: 'md-cloud-upload'}
				]*/
			}
		},
		computed: {
			triggerClass() {
				return ['trigger-icon', this.collapsed ? 'rotate' : ''];
			},
			...mapState({
				// 标签数组
				tabList: state => state.tabNav.tabList,
				// 菜单数组
				routers: state => state.router.routers.filter(item => {
					return item.path !== '*' && item.name !== 'login';
				})
			})
		},
		methods: {
			...mapActions(['handleRemove']),
			handleClickTab(id) {
				const route = getRouteById(id);
				this.$router.push(route);
			},
			handleTabRemove(id, event) {
				event.stopPropagation();
				this.handleRemove({
					id,
					$route: this.$route
				}).then(nextRoute => this.$router.push(nextRoute));
			},
			labelRender(item) { // render函数
				return h=>{
					return (
						<div>
							<span>{ item.meta.title }</span>
							<icon nativeOn-click={this.handleTabRemove.bind(this, getTabNameByRoute(item))}
								type="md-close-circle"
								style="line-high:10px;padding-left:5px;"></icon>
						</div>
					)
				}
			}
		}
	}
</script>

<style lang="less">
	.layout-wrapper, .layout-outer {
		height: 100%;

		.header-wrapper {
			background: #fff;
			box-shadow: 0 1px 1px 1px rgba(0 0 0 .1);
			padding: 0 23px;

			.trigger-icon {
				cursor: pointer;
				transition: transform .3s ease;

				&.rotate {
					transform: rotateZ(-90deg);
					transition: transform .3s ease;
				}
			}
		}

		.sider-outer {
			height: 100%;
			overflow: hidden;

			.ivu-layout-sider-children {
				margin-right: -20px;
				overflow-y: scroll;
				overflow-x: hidden;
			}
		}

		.content-con {
			padding: 0;

			.ivu-tabs-bar {
				margin-bottom: 0;
			}
		}

		.view-box {
			padding: 0;
		}

		.page-card {
			min-height: ~"calc(100vh - 84px)";
		}
	}
</style>
